<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div class="block" style="  margin-top: 12px;">
        <div class="formitem">
          <label class="label">收货人:</label>
          <input
            placeholder="请输入收货人姓名"
            bindchange="onTrueName"
            v-model="true_name"
            placeholder-class="placeholder"
            @focusout="inputBlur"
            @focusin="inputFocus"
          />
        </div>
      </div>

      <div class="block">
        <div class="formitem">
          <label class="label">联系电话:</label>
          <input
            placeholder="请输入联系电话"
            bindchange="onMobPhone"
            type="number"
            maxlength="11"
            v-model="mob_phone"
            placeholder-class="placeholder"
            @focusout="inputBlur"
            @focusin="inputFocus"
          />
        </div>
      </div>

      <div class="block">
        <div class="formitem">
          <label class="label">地区:</label>
          <areaSelect style="flex:1" @change="onAreaSelectChange" :areavalue="addressAreas">
            <div v-if="area_info" class="picker">
              <span>{{area_info}}</span>
            </div>
            <div v-else>请选择地址</div>
          </areaSelect>
        </div>
      </div>

      <div class="block" style="  margin-top: 12px;">
        <div class="formitem">
          <label class="label">详细地址:</label>
          <input
            placeholder="请输入详细地址"
            bindchange="onAddress"
            v-model="address"
            placeholder-class="placeholder"
            @focusout="inputBlur"
            @focusin="inputFocus"
          />
        </div>
      </div>

      <!--      <div v-if="edit" class="block" style="  margin-top: 12px;">-->

      <!--        <label class="" style="font-size:12px;">-->
      <!--          <input type="checkbox" v-model="is_default" style="vertical-align: middle;"/>-->
      <!--          设置为默认地址-->
      <!--        </label>-->

      <!--      </div>-->

      <!-- <div class='block' style='  margin-top: 12px;'>
  <div class='formitem'>
    <label class='label'>邮政编码:</label>
    <input placeholder='请输入邮政编码' placeholder-class='placeholder'>
  </div>
      </div>-->

      <div class="block sumit">
        <button type="warn" @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
  import Me from '@/dll/me'

  export default {
    name: 'addressEdit',
    data () {
      return {
        xheader: {
          title: '添加地址'
        },
        true_name: '',
        mob_phone: '',
        area_info: '',
        address_id: '',
        address: '',
        is_default: 0,
        addressAreas: [],
        edit: false
      }
    },

    watch: {
      mob_phone (n, o) {
        if (n.length > 11) {
          this.mob_phone = o
        }
      }
    },
    created () {
      let address = this.$route.params.address
      if (address) {
        this.true_name = address.true_name
        this.mob_phone = address.mob_phone
        this.area_info = address.area_info
        this.address_id = address.address_id
        this.address = address.address
        this.is_default = address.is_default * 1
        this.edit = true
        let addressAreas = []
        let alias = address.alias.split('_')
        alias.map((item, index) => {
          if (item) {
            addressAreas.push({
              id: item
            })
          }
        })
        this.xheader.title = '修改地址'
        this.addressAreas = addressAreas
        this.$forceUpdate()
      }
    },
    methods: {
      onAreaSelectChange (detail) {
        let area_info = []
        for (var i in detail) {
          area_info.push(detail[i].area)
        }
        this.addressAreas = detail
        this.area_info = area_info.join(' ')
      },
      async submit () {
        let addressAreas = this.addressAreas
        let province = {}
        let city = {}
        let area = {}
        let street = {}
        addressAreas.map((item, index) => {
          if (index == 0) {
            province = item
            return
          }
          if (index == 1) {
            city = item
            return
          }
          if (index == 2) {
            area = item
            return
          }
          if (index == 3) {
            street = item
          }
        })

        let param = {
          true_name: this.true_name,
          mob_phone: this.mob_phone,
          province_id: province.id,
          city_id: city.id,
          area_id: area.id,
          street_id: street.id || 0,
          alias: `${province.id}_${city.id}_${area.id}_${street.id || 0}`,
          area_info: this.area_info,
          address: this.address
        }

        let isSubmit = true
        for (var i in param) {
          if (i == 'street_id') {
            break
          }
          if (!param[i]) {
            isSubmit = false
          }
        }

        if (!isSubmit) {
          return
        }

        if (this.edit) {
          param.address_id = this.address_id
          param.is_default = this.is_default ? 1 : 0
          let res = await Me.editMeAddress(param)
          if (res.code == 0) {
            this.$vux.alert.show({
              title: '提示',
              content: '地址已修改',
              onHide: () => {
                this.$router.back()
              }
            })
          } else {
            this.$vux.alert.show({
              title: '提示',
              content: res.msg
            })
          }
        } else {
          let res = await Me.addMeAddress(param)
          if (res.code == 0) {
            this.$vux.alert.show({
              title: '提示',
              content: '地址已添加',
              onHide: () => {
                this.$router.back()
              }
            })
          } else {
            this.$vux.alert.show({
              title: '提示',
              content: res.msg
            })
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .page {
    padding-bottom: 78px;
  }

  .sumit {
    padding-bottom: 32px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .sumit button {
    font-size: 16px;
  }

  .formitem {
    background-color: #fff;
    display: flex;
    padding: 14px 24px;
    box-sizing: border-box;
    align-items: center;
  }

  .formitem .label {
    display: block;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
    width: 96px;
  }

  .formitem input,
  .formitem picker,
  .placeholder,
  .formitem areaSelect {
    flex: 1;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
  }

  .formitem .picker {
    position: relative;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
    min-height: 21px;
    display: block;
    box-sizing: border-box;
    padding-right: 15px;
  }

  .formitem .picker:before {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #351009;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    top: -2px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -4px;
  }

  .placeholder {
    opacity: 0.2;
  }
</style>
